<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <script type='text/javascript' src="angular.js"></script>
        <style type="text/css">
        div{
            width: 120px;
            height: 120px;
            float: left;
            margin: 20px;
        }
    .myColor{
        background: red;
    }
    .myBoder{
        border: 2px solid blueviolet;
    }
    .myPad{
        padding: 30px;
    }

        </style>
	</head>
	<body ng-app='app' ng-controller='czq'>
        <h1>何劲</h1>
    <div ng-class="'myColor myBoder'">ng-class字符串的方式绑定</div><!-- 自己以字符串的方式绑定class样式 -->
    <div ng-class="['myColor','myBoder','myPad']">ng-class数组的方式绑定</div>
    <div ng-class="myStyle">ng-class数组的方式绑定</div>
    <div ng-class="['myColor',myStyle]">ng-class数组,对象</div>
    <div ng-class="['myPad',false?'myBoder':'myColor']">三目运算符</div>
    <div ng-class="['myPad',flag?'myBoder':'myColor']">三目运算符</div>
    <input type="button" value="点击" ng-click='toggle()'>
	</body>  
	<script>

       var app=angular.module('app',[])
		app.controller('czq',function($scope){
			$scope.myStyle={
                myColor:false,
                myBoder:false,
                myPad:true,
            };
            $scope.flag=true;
            $scope.toggle=function(){
                $scope.flag=!$scope.flag;
            };
		})

	</script>
</html>
